{extend name="layouts/app"/}
{block name="main"}
<div class="layui-card">
    <div class="layui-card-header">系统配置</div>
    <div class="layui-card-body">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                {volist name="$config_group->arrayValue" id="value"}
                    <li {eq name="$i" value="1"}class='layui-this'{/eq} >{$value}</li>
                {/volist}
            </ul>
            <div class="layui-tab-content">
                {foreach $config_group->arrayValue as $key=>$value}
                    <div class='layui-tab-item {eq name="$value" value=":current($config_group->arrayValue)"}layui-show{/eq}'>
                        <div class="layui-form">
                            <table class="layui-hide" id="table{$key}" data-type="{$key}" lay-filter="table"></table>
                            <script type="text/html" id="toolbar{$key}">
                                <div class="layui-btn-container">
                                    <a class="layui-btn layui-btn-sm" href="{:url('create')}?type={$key}">添加分类</a>
                                </div>
                            </script>
                            <script type="text/html" id="barTool">
                                <a href='{:url("edit")}?id={{ d.id }}' class="layui-btn layui-btn-xs">编辑</a>
                                <a href='{:url("delete")}?id={{ d.id }}' class="layui-btn layui-btn-danger layui-btn-xs layui-tr-del">删除</a>
                            </script>
                        </div>
                    </div>
                {/foreach}
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    $(".layui-tab-item").each(function () {
       var tableId = $(this).find("table").attr("id");
       var type =$(this).find("table").data("type");
       tables(tableId,type);
    });
    function tables(tableId,type) {
        var treeGrid = null;
        layui.use(['table', 'treeGrid','notice'], function() {
            var $ = layui.$,
                treeGrid = layui.treeGrid,
                notice = layui.notice,
                ptable = null;
            ptable = treeGrid.render({
                id: tableId,
                elem: '#' + tableId,
                toolbar: '#toolbar'+type,
                idField: 'id',
                url: "{:url('index')}",
                where:{type:type},
                cellMinWidth: 100,
                treeId: 'id', //树形id字段名称
                treeUpId: 'parent_id', //树形父id字段名称
                treeShowName: 'title', //以树形式显示的字段
                height: 'full-140',
                isFilter: false,
                iconOpen: false, //是否显示图标【默认显示】
                isOpenDefault: true, //节点默认是展开还是折叠【默认展开】
                onDblClickRow: false, //去除双击事件
                cols: [
                    [
                        { field: 'id', align: 'center', width: 60, title: 'ID' },
                        { field: 'title', width: 200, title: '分类名称'},
                        { field: 'description', title: '分类描述' },
                        { field: 'status', width: 100,title: '状态', templet: '<div>{{#  if(d.status){ }} <button class="layui-btn layui-btn layui-btn-xs">正常</button> {{#  } else { }} <button class="layui-btn layui-btn-danger layui-btn layui-btn-xs">禁用</button> {{#  } }} </div>' },
                        { fixed: 'right', width: 160, title: '操作', toolbar: '#barTool' }
                    ]
                ],
                page: false
            });

        });
    }
</script>
{/block}